<script setup>
import { reactive, onMounted, getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router';
import ListItem from "../components/ListItem.vue";

const list = reactive([]);

const url = "http://20.187.111.28:3000/getgoods";

// const ctx = getCurrentInstance();
// console.log(ctx);

onMounted(()=>{
    fetch(url).then(res=>res.json()).then(res=>{
        list.push(...res.data.slice(33, 37));
        list.forEach((val,idx)=>{
            val.isHot = idx%2 ? true : false;
            val.isNew = idx%3 ? true : false;
        })
    })
})

const router = useRouter()
function goToDetail(id){
  router.push({
    name:"gDetail",
    params:{
      id: id
    }
  })
}
</script>

<template>
<div class="main-goods-list" id="appMain">
    <div class="main-box">
        <div class="main-box-right fl">
            <ul>
                <ListItem
                    v-for="item in list"
                    :key="item.goodsId"
                    :img="item.goodsImg"
                    :name="item.goodsName"
                    :id="item.goodsId"
                    :price="item.price"
                    :is-Hot="item.isHot"
                    :is-New="item.isNew"
                    @click="goToDetail(item.goodsId)"
                ></ListItem>
            </ul>
        </div>
    </div>
</div>
</template>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
